<script setup lang="ts">
import footerBtn from "@/components/footerBtn/index.vue";
import { useTheme } from "@/composables/useTheme";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { posterGet, posterSet, getList } from "@/api/setting.ts";
import { Tips, previewImageFun } from "@/utils";
import hideWechatMenu from "@/composables/hideWechatMenu";
import Cache from "@/utils/cache";
onShow(() => {
  hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
onLoad(() => {
  getCopyDetailsLocalStorage();
  getPosterBgListHandler();
  getPosterHandler();
});
const tableRef = ref(null);
function getPosterHandler() {
  posterGet().then((res) => {
    tableData.value = res.data.marketList;
    selectionAllHandler();
  });
}
const radioList = ref([]);
function getPosterBgListHandler() {
  getList().then((res) => {
    const { qucode_url, list } = res.data;
    radioList.value = list;
    qucodeUrl.value = qucode_url;
  });
}
// 默认全选
function selectionAllHandler() {
  // 等待DOM更新后选中所有行
  nextTick(() => {
    // 如果 uni-table 支持全选方法

    if (tableRef.value && tableRef.value.selectionAll) {
      tableRef.value.selectionAll();
    }
  });
}
const { colorStyle } = useTheme();
let current = ref(0);

function radioChange(evt: any) {
  for (let i = 0; i < radioList.value.length; i++) {
    if (radioList.value[i].id === evt.detail.value) {
      current.value = i;
      break;
    }
  }
}
let selectedIndexs: number[] = [];
let tableData = ref([]);
// 多选
function selectionChange(e: any) {
  selectedIndexs = e.detail.index;
  console.log(selectedItems(), "选中的数据");
}
// 多选处理
function selectedItems() {
  return selectedIndexs.map((i) => tableData.value[i].id);
}
let copy_details = ref("");
let poster_images = ref("");
// 获取营销文案
function getCopyDetailsLocalStorage() {
  let detail = Cache.get("copy_details");
  if (detail) {
    copy_details.value = detail;
  }
}
// 营销文案缓存本地
function setCopyDetailsLocalStorage() {
  if (copy_details.value) {
    Cache.set("copy_details", copy_details.value);
  }
}
function submitHandler() {
  setCopyDetailsLocalStorage();
  uni.showLoading({ title: "海报生成中...", mask: true });
  const code_json = selectedItems()
    .map((item) => item.id)
    .join(",");
  const params = {
    poster_id: radioList.value[current.value].id,
    code_json: selectedItems().join(","), //列表的code 多个使用,号隔开
    copy_details: copy_details.value,
  };

  posterSet(params).then((res) => {
    poster_images.value = res.data.poster_images;
    uni.hideLoading();
    // Tips({ title: res.info });
    open();
  });
}
// 创建响应式数据
const show = ref(false);

// 定义方法
function open() {
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  // console.log('close');
}
let qucodeUrl = ref("");
function copyUrlHandler() {
  if (!qucodeUrl.value) return Tips({ title: "暂无链接" });
  uni.setClipboardData({
    data: qucodeUrl.value,
    success: function () {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 2000,
      });
    },
  });
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="set_item mgt20 flex_sb">
      <text class="font_bold">首页链接</text>
      <view class="right_info flex_s">
        <text class="url_class line1" v-if="qucodeUrl">{{ qucodeUrl }}</text>
        <text class="url_class line1" v-else>暂无链接</text>
        <text class="iconfont icon-fuzhi" @click="copyUrlHandler"></text>
      </view>
    </view>
    <view class="mode_box pad2030 flex_sb">
      <text class="font_bold">海报底色</text>
      <radio-group @change="radioChange" class="radio_group flex_s">
        <label
          class="radio_item flex_s"
          v-for="(item, index) in radioList"
          :key="item.id"
        >
          <view>
            <radio
              color="var(--view-theme)"
              :value="item.id"
              :checked="index === current"
            />
          </view>
          <view>{{ item.title }}</view>
        </label>
      </radio-group>
    </view>
    <view class="table_box">
      <uni-table
        ref="tableRef"
        type="selection"
        stripe
        emptyText="暂无更多数据"
        @selection-change="selectionChange"
      >
        <uni-tr>
          <uni-th width="50" align="center">
            <view class="table_th"> 品类 </view>
          </uni-th>
          <uni-th width="50" align="center">
            <view class="table_th"> 回购 </view>
          </uni-th>
          <uni-th width="50" align="center">
            <view class="table_th"> 销售 </view>
          </uni-th>
        </uni-tr>

        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            <view class="table_td name_td">{{ item.code_name }}</view>
          </uni-td>
          <uni-td align="center">
            <view class="table_td colorRed">
              {{ item.askprice }}
            </view>
          </uni-td>
          <uni-td align="center">
            <view class="table_td colorRed">
              {{ item.bidprice }}
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="text_box">
      <view class="title">营销文案</view>
      <view class="textarea_box">
        <textarea
          class="textarea_class"
          placeholder-class="placeholder_class"
          :maxlength="20"
          placeholder="请输入营销文案 20字以内"
          v-model="copy_details"
        ></textarea>
      </view>
    </view>
    <footerBtn @submitHandler="submitHandler" />
    <up-popup
      :show="show"
      mode="center"
      @close="close"
      @open="open"
      bgColor="transparent"
    >
      <view class="pop_box">
        <view class="img_box">
          <image
            show-menu-by-longpress
            :src="poster_images"
            mode="scaleToFill"
          />
        </view>
        <view class="tip_title">长按图片保存至相册</view>
      </view>
    </up-popup>
  </view>
</template>

<style scoped lang="scss">
.font_bold {
  font-weight: 600;
}
.table_box {
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  .table_th {
    font-size: 34rpx;
  }
  .table_td {
    font-size: 32rpx;
    font-weight: bold;
  }
  .name_td {
    font-weight: normal;
  }
}
::v-deep .uni-table {
  // 改表头字体样式
  .uni-table-th {
    border-right: none;
    background: #fff;
    font-size: 24rpx;
    font-weight: normal;
    color: rgba(150, 153, 157, 1);
    font-size: 24rpx;
  }
  //   内容奇数行
  .uni-table-tr:nth-child(2n + 2) {
    background: rgba(243, 245, 245, 1);
  }
  //   内容偶数行
  .uni-table-tr:nth-child(2n + 3) {
    background: #fff;
  }
  .colorRed {
    color: #d90506 !important;
  }
}
.wrap {
  padding: 30rpx 20rpx 200rpx;
  .pop_box {
    .tip_title {
      font-size: 30rpx;
      text-align: center;
      margin-top: 30rpx;
      color: #fff;
    }
    .img_box {
      width: 690rpx;
      height: 1153rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .text_box {
    border-radius: 14rpx;
    background: #fff;
    .title {
      //   height: 80rpx;
      //   line-height: 80rpx;
      padding-top: 20rpx;
      padding-left: 26rpx;
      color: rgba(39, 38, 54, 1);
      font-size: 30rpx;
      font-weight: 600;
    }
    .textarea_box {
      padding: 20rpx;
      .textarea_class {
        font-size: 30rpx;
        height: 100rpx;
        width: 100%;
      }
      .placeholder_class {
        color: #ccc;
        font-size: 30rpx;
      }
    }
  }
  .mode_box {
    background: #fff;
    border-radius: 14rpx;
    color: rgba(39, 38, 54, 1);
    font-size: 30rpx;
    margin-bottom: 20rpx;
    .radio_group {
      .radio_item {
        margin-left: 20rpx;
      }
    }
  }
  .set_item {
    background: #fff;
    padding: 30rpx;
    color: rgba(39, 38, 54, 1);
    font-size: 30rpx;

    .right_info {
      .url_class {
        text-align: right;
        width: 410rpx;
        flex-grow: 1;
      }
    }
    .radio_group {
      .radio_item {
        margin-left: 20rpx;
      }
    }
    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
</style>
